<header class="modal-header" data-test-modal="upload-theme">
    <h1>
        {{#if theme}}
            {{#if hasWarningsOrErrors}}
                Upload successful with {{#if validationErrors}}errors{{else}}warnings{{/if}}
            {{else}}
                Upload successful!
            {{/if}}
        {{else if (or validationErrors fatalValidationErrors)}}
            Invalid theme
        {{else}}
            Upload a theme
        {{/if}}
    </h1>
</header>
<a class="close" href="#" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>

<div class="modal-body">
    {{#if theme}}
        {{#if hasWarningsOrErrors}}
             <ul class="theme-validation-errors">
                <li>
                    <p>
                        "{{themeName}}" uploaded successfully but some {{#if validationErrors}}errors{{else}}warnings{{/if}} were detected.
                        You are still able to use and activate the theme. Here's your report...
                    </p>
                </li>

                {{#if validationErrors}}
                    <div class="theme-validation-errordescription">
                        <h2 class="theme-validation-errortype">Errors</h2>
                        <p><em>(Very recommended to fix, functionality <span>could</span> be restricted)</em></p>
                    </div>
                {{/if}}
                {{#each validationErrors as |error|}}
                    <li class="theme-validation-item">
                        {{gh-theme-error-li error=error}}
                    </li>
                {{/each}}

                {{#if validationWarnings}}
                    <div class="theme-validation-errordescription">
                        <h2 class="theme-validation-errortype">Warnings</h2>
                    </div>
                {{/if}}
                {{#each validationWarnings as |error|}}
                    <li class="theme-validation-item">
                        {{gh-theme-error-li error=error}}
                    </li>
                {{/each}}
            </ul>
        {{else}}
            <p>
                "{{themeName}}" uploaded successfully.
                {{#if canActivateTheme}}Do you want to activate it now?{{/if}}
            </p>
        {{/if}}
    {{else if displayOverwriteWarning}}
        <p>
            "{{fileThemeName}}" will overwrite an existing theme of the same name. Are you sure?
        </p>
    {{else if (or validationErrors fatalValidationErrors)}}
        <ul class="theme-validation-errors">
            {{#if fatalValidationErrors}}
                <div class="theme-validation-errordescription">
                    <h2 class="theme-validation-errortype fatal">Fatal Errors</h2>
                    <p><em>(Must-fix to activate theme)</em></p>
                </div>
            {{/if}}
            {{#each fatalValidationErrors as |error|}}
                <li class="theme-validation-item">
                    {{gh-theme-error-li error=error}}
                </li>
            {{/each}}

            {{#if validationErrors}}
                <div class="theme-validation-errordescription">
                    <h2 class="theme-validation-errortype">Errors</h2>
                    <p><em>(Very recommended to fix, functionality <span>could</span> be restricted)</em></p>
                </div>
            {{/if}}
            {{#each validationErrors as |error|}}
                <li class="theme-validation-item">
                    {{gh-theme-error-li error=error}}
                </li>
            {{/each}}
        </ul>
    {{else}}
        {{gh-file-uploader
            url=uploadUrl
            paramName="file"
            accept=accept
            labelText="Click to select or drag-and-drop your theme zip file here."
            validate=(action "validateTheme")
            uploadStarted=(action "uploadStarted")
            uploadFinished=(action "uploadFinished")
            uploadSuccess=(action "uploadSuccess")
            uploadFailed=(action "uploadFailed")
            listenTo="themeUploader"}}
    {{/if}}
</div>

<div class="modal-footer">
    <button {{action "closeModal"}} disabled={{closeDisabled}} class="gh-btn" data-test-close-button>
        <span>{{#if theme}}Close{{else}}Cancel{{/if}}</span>
    </button>
    {{#if displayOverwriteWarning}}
        <button {{action "confirmOverwrite"}} class="gh-btn gh-btn-red" data-test-overwrite-button>
            <span>Overwrite</span>
        </button>
    {{/if}}
    {{#if validationErrors}}
        <button {{action "reset"}} class="gh-btn gh-btn-green" data-test-try-again-button>
            <span>Try Again</span>
        </button>
    {{/if}}
    {{#if canActivateTheme}}
        <button {{action "activate"}} class="gh-btn gh-btn-green" data-test-activate-now-button>
            <span>Activate Now</span>
        </button>
    {{/if}}
</div>
